<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-03 17:20:05
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-03 17:33:57
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
           margin: 0;
           padding: 0;
        }

        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            color: #fff;
            font-size: 20px;
        }

        div.active{
            width: 100px;
            height: 100px;
            background-color: orange;
            color: greenyellow;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="one two three four a b c">hello world</div>
    <button>点击</button>
    <script>
        var divEle = document.getElementsByTagName('div')[0];
        var btnEle = document.getElementsByTagName('button')[0];


        // className  
        // 读 
        // 元素.className => 完整的类名字符串

        // console.log(divEle.className);

        //写
        // 元素.className = '新值'
        // divEle.className = 'qfedu';
        //<div class="qfedu">hello world</div>
        //元素.className += '新值'
        // divEle.className += ' qfedu';

        // classList
        // 每个元素天生自带一个 classList
        // classList 包含这个元素所有的类名 
        //追加
        // 元素.classList.add('类名');
        // 删除
        // 元素.classList.remove('类名');

        // 切换
        // 元素.classList.toggle('类名');
        // 原来有 把原来的删了 
        // 原来没有就加上它 


        // divEle.classList.add('9999999');

        // divEle.classList.remove('four');
        btnEle.onclick = function(){
            divEle.classList.toggle("active")
        }

    </script>

</body>
</html>